<template>
    <!-- 首页轮播 -->
    <nut-swiper :init-page="2"
                :auto-play="3000"
                pagination-visible
                pagination-color="#426543"
                :is-prevent-default="false"
                pagination-unselected-color="#808080">
        <nut-swiper-item v-for="(item, index) in bannerList" :key="index" style="height: 30vh">
            <div style="background-color: #fff;height: 100%;width:100%;" @click="goDetail(item.link)">
                <image-box :src="item.image" draggable="false"></image-box>
            </div>
        </nut-swiper-item>
    </nut-swiper>

    <!-- 推荐游戏轮播 -->
    <game-item v-if="recommendationslist.length>0" style="padding-top: 20px;" :data="recommendationslist"></game-item>

    <!-- 热门游戏列表 -->
    <game-block></game-block>

    <!-- 我看过的 -->
    <p class="blockTitle">- 我看过的</p>
    <history-block></history-block>

    <!-- 即将上架 -->
    <template v-if="WaitUplist.length>0">
        <p v-if="WaitUplist.length>0" class="blockTitle" style="margin-top: 20px;">- 即将上架</p>
        <game-item :data="WaitUplist"></game-item>
    </template>

    <div class="mt20">
        <img src="@/assets/invalid-name.webp" alt="" style="width: 100%;">
    </div>

    <!-- 最近消息 -->
    <p class="blockTitle pt20">- 最近消息</p>
    <new-item></new-item>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import GameItem from './component/gameItem.vue'
import GameBlock from './component/gameBlock.vue'
import HistoryBlock from './component/history.vue'
import NewItem from './component/newItem.vue'
import banner1 from '../../assets/banner.webp'
import banner2 from '../../assets/banner1.webp'
import type {GameTopType} from './component/gameItem.vue'
import {axiosService} from '@/http/sever'

interface bannerInterface{
    image:string,
    link:string,
    title?:string
}

const bannerList=ref<bannerInterface[]>([
    {
        link:'1',
        image:banner1
    },
    {
        link:'2',
        image:banner2
    }
])

const getBanner=()=>{
    axiosService.post<bannerInterface[]>('/api/Index/banner',{}).then(res=>{
        console.log(res.data)
        bannerList.value=res.data||[]
    })
}


// 推荐列表
const recommendationslist = ref<GameTopType>([])
const getGameTop=()=>{
    axiosService.get<GameTopType>('/api/Index/gameTop').then(res=>{
        recommendationslist.value=res.data||[]
    })
}


//即将上架
const WaitUplist = ref<GameTopType>([])
const getWaitUp=()=>{
    axiosService.post<GameTopType>('/api/Index/gameWaitUp',{}).then(res=>{
        WaitUplist.value=res.data||[]
    })
}


const goDetail=(link:string)=>{
    // router.push('/game-detail')
    console.log(link)
}

getBanner()
getGameTop()
getWaitUp()

</script>

<style lang="scss" scoped>
</style>
